<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除浮动</title>
</head>
<!-- 为什么需要清楚浮动原因 -->
<!-- 由于容器内两个div元素浮动，脱离了文档流，父容器内容宽度为零（即发生高度塌陷），未能将子元素包裹住。
解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。其实就是清除浮动 -->
<style>
  /* 清除浮动第三种方式 */
  .clearfix:after {
    content: "\200B";
    display: block; /*  table 底下会多出来一部分 */
    height: 0;
    clear: both;
  }
  .clearfix {
    *zoom: 1;
  }

  .clear {
    clear: both;
  }
  .float>div {
    width: 50px;
    height: 100px;
    background-color: pink;
    /* display: inline-block; 虽然在一行但是元素之间有间隙 */
    float: left;
  }
  .span{
    /* float: left; 加上之后就能显示宽高了 */
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .box1 {
    border: 1px solid #ccc;
    /* overflow: hidden;  清楚浮动第二种方式 */
  }
  .item1 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: black;
  }
  .item2 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: pink;
  }
</style>
<body>
  <!-- <h3>浮动元素具有行内块属性</h3>
  <span class="span">12</span>
  <div class="float">
    浮动的工作原理:
    1.浮动元素脱离文档流（脱标），不占据空间（引起“高度塌陷”现象）不保留原来的位置。
    2.浮动元素碰到包含它的边框或者其他浮动元素的边框停留
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div> -->
  <div class="box1">
  <!-- <div class="box1 clearfix"> -->
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="clear"></div>
  </div>
</body>
</html>
<!-- ## 为什么清除浮动 https://www.bilibili.com/video/BV14J4114768?p=183 -->
<!-- ### 父盒子没有设置高度，浮动的元素会脱离文档流，为了不影响后面的元素，必须清楚浮动 -->


<!-- ## 清除浮动的四种方法 -->
<!-- 1. 额外标签法 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式 不常用-->
<!-- 2. 父级添加overflow:hidden或者overflow:auto -->
<!-- 3. 父级添加after伪元素 -->
<!-- 4. 父级添加双伪元素 -->
